<template>
	<view class="all">
		<view class="">
			{{describe}}
		</view>
		
		<view class="imgs">
			<view v-for="item, index in dataList" :key="index">
				<image class="resultImg" :src="getImgPath(item.path)" mode="aspectFit"></image>
			</view>
			
			
		</view>
	</view>
</template>

<script>
	import {request} from"@/api/request.js"
	export default {
		data() {
			return {
				dataList:[],
				page_size: 27,
				page_num: 1,
				total:0,
				cls_id:null,
				describe:'',
			};
		},
		onLoad(option) {
			// console.log(option)
			this.cls_id = option.id
			this.getData()
		},
		onReachBottom(){
				// console.log('已触底');
				var pa = Math.ceil(this.total/this.page_size)
				// console.log(pa)
				if (this.page_num < pa){
					this.page_num += 1
					var res = request({
						url: '/PetImg',
						method:'GET',
						data:{page_size:this.page_size, page_num:this.page_num, cls_id: this.cls_id}
					}).then(res =>{
						// console.log(res)
						if (res.code == 1){
							
							// console.log(res)
							// this.msgList = res.data
							this.dataList = this.dataList.concat(res.data)
							// this.total = res.total
						}
					})
					
				}
				else{
					uni.showToast({
						title: '已到底',
						duration: 1000,
						icon:'none'
					});
				}
				
		    
		},
		methods:{
			getImgPath(path){
				// console.log(config)
				return config.imgurl + path
			},
			
			
			getData(){
				var res = request({
					url: '/PetImg',
					method:'GET',
					data:{page_size:this.page_size, page_num:this.page_num, cls_id: this.cls_id}
				}).then(res =>{
					// console.log(res)
					if (res.code == 1){
						
						// console.log(res)
						this.dataList = res.data
						this.total = res.total
						this.describe = res.describe
					}
				})
			},
		}
	}
</script>

<style lang="scss">
.all{
	padding: 20rpx 45rpx;
}
.imgs{
	margin-top: 30rpx;

	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	// justify-content: center;
	// justify-content: space-between;
	align-content: center;
	flex-wrap: wrap;
	.resultImg{
				width: 200rpx;
				height: 200rpx;
				// height: 100%;
				margin-left: 10rpx;
				margin-top: 10rpx;
			}
}


</style>
